<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div>
    <div class="super-flow-demo1">
      <div class="flow-container" ref="flowContainer">
        <super-flow
          ref="superFlow"
          :link-base-style="linkBaseStyle"
          :node-list="nodeList"
          :link-list="linkList"
          :origin="origin"
          :draggable="false"
          :linkAddable="false"
        >
          <template v-slot:node="{ meta }">
            <el-tooltip :content="meta.name">
              <div class="flow-node ellipsis" @click="nodeClick(meta)">
                {{ meta.name }}
              </div>
            </el-tooltip>
          </template>
        </super-flow>
      </div>
    </div>
    <TableFiled v-if="tableFiledVisible" :tableFiledVisible="tableFiledVisible" :currentData="currentData" @handleEvent="handleEvent" />
    <el-dialog
      v-model="visible"
      custom-class="full-screen"
      :fullscreen="false"
      title="数据预览"
      width="1200px"
      append-to-body
      @close="visible = false"
    >
      <ViewOffice v-if="visible" :srcUrl="url" type=".xlsx" />
    </el-dialog>
  </div>
</template>
    
    <script>
import SuperFlow from 'vue-super-flow';
import 'vue-super-flow/lib/index.css';
import { getBloodRelationship } from '@/api/metaData/index';
import TableFiled from './TableFiled.vue';
import ViewOffice from '@/components/ViewOffice'
export default {
  props: ['paramData'],
  data() {
    return {
      tableFiledVisible: false,
      visible: false,
      origin: [650, 450],
      nodeList: [],
      linkList: [],
      url: '',
      linkBaseStyle: {
        color: '#666666', // line 颜色
        hover: '#FF0000', // line hover 的颜色
        textColor: '#666666', // line 描述文字颜色
        textHover: '#FF0000', // line 描述文字 hover 颜色
        font: '14px Arial', // line 描述文字 字体设置 参考 canvas font
        dotted: false, // 是否是虚线
        lineDash: [4, 4], // 虚线时生效
        background: 'rgba(255,255,255,0.6)' // 描述文字背景色
      },
      businessData: null,
      currentData: null
    };
  },
  components: {
    SuperFlow,
    TableFiled,
    ViewOffice
  },
  mounted() {
    // document.addEventListener('mousemove', this.docMousemove);
    // document.addEventListener('mouseup', this.docMouseup);
    //执行查询
    this.doquery(this.paramData);
  },
  methods: {
    handleEvent() {
      this.currentData = null;
      this.tableFiledVisible = false;
    },
    // 点击事件
    nodeClick(param) {
      if (![2, 4, 5].includes(param?.level)) {
        return;
      }
      if (param?.level === 5) {
        this.visible = true;
        this.url = param?.type;
      } else {
        this.currentData = param;
        this.tableFiledVisible = true;
      }
    },
    //查询
    doquery(param) {
      getBloodRelationship(param).then((res) => {
        this.businessData = res?.data;
        this.processFlow();
      });
    },
    //组装图形数据
    processFlow() {
      let nodeTmpArr = [];
      let linkTmpArr = [];
      const firstNode = {
        id: 'node_first',
        width: 120,
        height: 40,
        coordinate: [-600, -148],
        meta: {
          name: this.businessData?.databaseName,
          type: this.businessData?.databaseType,
          level: 1
        }
      };
      nodeTmpArr.push(firstNode);
      const children = this.businessData?.outerList || [];
      // 计算一共有多少个子分支
      let count = 0;
      let treeCountObj = [];
      this.businessData?.outerList.forEach((el) => {
        let thridCount = 0;
        el?.innerList?.forEach((item) => {
          count++;
          thridCount++;
        });
        treeCountObj.push({ thridCount });
      });
      const max = -148 + Math.floor(count / 2) * 74;
      let y2List = [];
      let y3List = [];
      // 第三层Y轴坐标
      for (let i = 0; i < count; i++) {
        y3List.push(max - i * 74);
      }
      //第二层坐标
      let thridIndex = 0;
      for (let i = 0; i < treeCountObj.length; i++) {
        y2List.push(max - thridIndex * 74 - (treeCountObj[i].thridCount - 1) * 0.5 * 37);
        thridIndex = treeCountObj[i].thridCount;
      }
      let thirdWhileCount = 0;
      children.forEach((el, index) => {
        // 第二层
        const node = {
          id: `node_second_${index}`,
          width: 120,
          height: 40,
          coordinate: [-400, y2List[index]],
          meta: {
            name: el.tableName,
            level: 2
          }
        };
        nodeTmpArr.push(node);
        linkTmpArr.push({
          startId: 'node_first',
          endId: `node_second_${index}`,
          startAt: [100, 30],
          endAt: [0, 20]
        });
        //第三层
        if (el.innerList && el.innerList.length > 0) {
          el.innerList.forEach((item, threeIndex) => {
            const thirdNode = {
              id: `node_third_${index}_${threeIndex}`,
              width: 120,
              height: 40,
              coordinate: [-200, y3List[thirdWhileCount]],
              meta: {
                name: item?.createTime,
                type: item?.inventoryCount,
                level: 3
              }
            };
            nodeTmpArr.push(thirdNode);
            linkTmpArr.push({
              startId: `node_second_${index}`,
              endId: `node_third_${index}_${threeIndex}`,
              startAt: [100, 20],
              endAt: [0, 20]
            });
            //第四层
            const forthNode = {
              id: `node_forth_${index}_${threeIndex}`,
              width: 120,
              height: 40,
              coordinate: [0, y3List[thirdWhileCount]],
              meta: {
                name: item?.tableName,
                type: null,
                level: 4
              }
            };
            //有第四层
            if (item?.tableName) {
              nodeTmpArr.push(forthNode);
              linkTmpArr.push({
                startId: `node_third_${index}_${threeIndex}`,
                endId: `node_forth_${index}_${threeIndex}`,
                startAt: [100, 20],
                endAt: [0, 20]
              });
            }
            //第五层
            const fivethNode = {
              id: `node_fiveth_${index}_${threeIndex}`,
              width: 120,
              height: 40,
              coordinate: [200, y3List[thirdWhileCount]],
              meta: {
                name: item?.fileName,
                type: item?.fileUrl,
                level: 5
              }
            };
            // 有第四层
            if (item?.tableName) {
              linkTmpArr.push({
                startId: `node_forth_${index}_${threeIndex}`,
                endId: `node_fiveth_${index}_${threeIndex}`,
                startAt: [100, 20],
                endAt: [0, 20]
              });
            } else {
              linkTmpArr.push({
                startId: `node_third_${index}_${threeIndex}`,
                endId: `node_fiveth_${index}_${threeIndex}`,
                startAt: [100, 20],
                endAt: [0, 20]
              });
              fivethNode.coordinate = [0, y3List[thirdWhileCount]];
            }
            nodeTmpArr.push(fivethNode);
            thirdWhileCount++;
          });
        }
      });
      this.nodeList = [...nodeTmpArr];
      this.linkList = [...linkTmpArr];
    },
    //取消
    cancel() {
      this.$emit('close');
    }
  }
};
</script>
    
<style lang="less">
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

.link-base-style-form {
  .el-form-item {
    margin-bottom: 12px;
  }

  padding-bottom: 20px;
  border-bottom: 1px solid #dcdcdc;
}

.super-flow-demo1 {
  margin-top: 20px;
  width: 100%;
  height: 600px;
  background-color: #f5f5f5;
  @list-width: 200px;

  > .node-container {
    width: @list-width;
    float: left;
    height: 100%;
    text-align: center;
    background-color: #ffffff;
  }

  > .flow-container {
    width: 100%;
    float: left;
    height: 100%;
    overflow: hidden;
  }

  .flow-node {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    line-height: 40px;
    padding: 0 6px;
    font-size: 12px;
  }
}

.node-item {
  @node-item-height: 30px;
  font-size: 14px;
  display: inline-block;
  height: @node-item-height;
  width: 120px;
  margin-top: 20px;
  background-color: #ffffff;
  line-height: @node-item-height;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  text-align: center;
  z-index: 6;

  &:hover {
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
  }
}
</style>